<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            协议审核
          </p>
          <div>
            <div>
              <Form inline>
                <FormItem>
                  <i-input type="text" v-model="form.target" style="width:200px" icon="md-apps"
                           placeholder="请输入结算对象"></i-input>
                </FormItem>
                <FormItem>
                  <i-input type="text" v-model="form.bankName" style="width:200px" icon="md-card"
                           placeholder="请输入银行名称"></i-input>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.contractDate" placeholder="请选择签约时间" style="width: 200px">
                  </DatePicker>
                </FormItem>
                <FormItem>
                  <i-input type="number" v-model="form.term" style="width:200px" icon="md-code"
                           placeholder="请输入合同期限"></i-input>
                </FormItem>
                <FormItem>
                  <Select v-model="form.reviewType" style="width:200px" placeholder="请选择协议类型">
                    <Option v-for="item in reviewTypes" :value="item.value" :key="item.value">{{ item.key }}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.protocolDateRange" placeholder="请选择协议时间段"
                              style="width: 200px">
                  </DatePicker>
                </FormItem>
                <FormItem>
                  <i-input type="text" v-model="form.sponsor" style="width:200px" icon="md-apps"
                           placeholder="请输入发起人姓名"></i-input>
                </FormItem>
                <FormItem>
                  <DatePicker type="daterange" v-model="form.createDate" placeholder="请选择发起时间"
                              style="width: 200px"></DatePicker>
                </FormItem>
                <FormItem>
                  <Select v-model="form.manageCom" style="width:200px" placeholder="请选择管理机构">
                    <Option v-for="item in manageComs" :value="item.value" :key="item.value">{{ item.key }}</Option>
                  </Select>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="query">查询</Button>
                </FormItem>
                <FormItem>
                  <Button @click="cancelQuery">取消</Button>
                </FormItem>
              </Form>
            </div>
            <div>
              <Table size="small" :data="data" :columns="columns"></Table>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import data from '../data.js'
  import banks from '../bank.js'

  export default {
    name: "schedule",
    data() {
      return {
        form: {
          target: '',
          systemBankName: '',
          bankName: '',
          bankArea: '',
          accountType: '',
          account: '',
          bankCode: '',
          reviewType: '',
          sponsor: '',
          createDate: '',
          status: ''
        },
        banks: banks,
        accountTypes: [
          {
            key: '手续费',
            value: '1',
            color:'primary'
          },
          {
            key: '出单费',
            value: '2',
            color:'success'
          },
          {
            key: '保全费',
            value: '3',
            color:'error'
          },
          {
            key: '服务费',
            value: '4',
            color:'warning'
          }
        ],
        reviewTypes: [
          {
            key: '待审核',
            value: '1'
          },
          {
            key: '已审核',
            value: '2'
          },
          {
            key: '已退回',
            value: '3'
          },
          {
            key: '已通过',
            value: '4'
          }
        ],
        cities: [],
        data: data,
        columns: [
          {
            title: '结算对象',
            key: 'target',
            width: 200
          },
          {
            title: '系统银行',
            key: 'systemBankName',
            render: (h, params) => {
              let txt = '';
              this.banks.map(bank => {
                if (bank.text === params.row.systemBankName) {
                  txt = bank.value
                }
              });
              return h('tag', {
                props: {
                  color: 'cyan'
                }
              }, txt)
            }
          },
          {
            title: '银行区域',
            key: 'bankArea',
            sortable: true
          },
          {
            title: '账号类型',
            key: 'accountType',
            sortable: true,
            render: (h, params) => {
              let txt = '';
              let color = '';
              this.accountTypes.map(account => {
                if (account.value === params.row.accountType) {
                  txt = account.key;
                  color = account.color
                }
              });
              return h('Tag', {
                props: {
                  color: color
                }
              }, txt)
            }
          },
          {
            title: '账户名称',
            key: 'account'
          },
          {
            title: '卡号',
            key: 'bankCode',
            width: 180
          },
          {
            title: '发起人',
            key: 'sponsor'
          },
          {
            title: '发起时间',
            key: 'createDate',
            width: 180
          },
          {
            title: '状态',
            key: 'status',
            render: (h, params) => {
              let list = [
                {
                  key: '1',
                  value: '待审核',
                  color: 'gold'
                },
                {
                  key: '2',
                  value: '已审核',
                  color: 'green'
                },
                {
                  key: '3',
                  value: '已退回',
                  color: 'red'
                },
                {
                  key: '4',
                  value: '已通过',
                  color: 'geekblue'
                },
              ];
              let obj;
              for (let i = 0; i < list.length; i++) {
                if (params.row.status === list[i].key) {
                  obj = list[i];
                  break
                }
              }
              return h('tag', {
                props: {
                  color: obj.color
                }
              }, obj.value)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.viewDetail(params.row)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small',
                    disabled: params.row.enable === '1'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.makeSchedule(params.row)
                    }
                  }
                }, '审核')
              ])
            }
          }
        ]
      }
    },
    methods: {
      query() {

      },
      cancelQuery() {

      },
      viewDetail() {

      },
      makeSchedule() {

      },
      cancelSchedule() {

      }
    }
  }
</script>

<style scoped>

</style>
